<template>
  <el-container>
    <el-aside
      :width="!isCollapse ? '200px' : '60px'"
      style="overflow-x: hidden"
    >
      <h3
        v-if="!isCollapse"
        class="title"
      >{{$t('title')}}
      </h3>
      <i
        v-else
        class="el-icon-basketball title"
        style="font-size: 30px; display: block"
      ></i>
      <el-menu
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        unique-opened
        :collapse-transition="false"
        :router="true"
        :default-active="activePath"
      >
        <!-- 菜单 -->
        <el-submenu
          v-if="item.children && item.children.length > 0"
          :key="item.path"
          :index="item.id + ''"
          v-for="item in menuList"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <!-- 有二级菜单 -->
          <el-menu-item
            :index="subitem.path"
            v-for="subitem in item.children"
            :key="subitem.id"
            @click="saveNavStatus(subitem)"
          >
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-menu"></i>
              <!-- 二级菜单名称 -->
              <span>{{ subitem.name }}</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 无二级菜单 -->
        <el-menu-item
          v-if="!item.children"
          :key="item.path"
          :index="item.path"
          v-for="item in menuList"
          @click="saveNavStatus(item)"
        >
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="header">
        <!-- 折叠按钮 -->
        <div
          @click="meanCollapse"
          class="collapse"
        >
          <i
            v-if="!isCollapse"
            class="el-icon-s-fold"
            style="font-size: 28px"
          ></i>
          <i
            v-else
            class="el-icon-s-unfold"
            style="font-size: 28px"
          ></i>
        </div>
        <div class="mianbao">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-if="tabsList.length <= 8"
              v-for="(item, i) in tabsList"
              :key="item.path"
              :to="{ path: item.path }"
            >{{ item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        {{$i18n.locale}}
        <!-- 头部右侧：头像和退出登录下拉框 -->
        <div class="userinfo">
          <el-dropdown
            class="avatar-container right-menu-item hover-effect"
            trigger="hover"
          >
            <div>
              <!-- 头像 -->
              <img
                src="../assets/logo.png"
                class="userImg"
              />
              <span class="user-name">{{
                $cookie.get("userName") ? $cookie.get("userName") : "迪加奥科曼"
              }}</span>
              <i class="el-icon-caret-bottom" />
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                divided
                @click.native="logout"
              >
                <span>退出登录</span>
              </el-dropdown-item>
              <el-dropdown-item
                divided
                @click.native="changeLang(1)"
              >
                <span>中文</span>
              </el-dropdown-item>
              <el-dropdown-item
                divided
                @click.native="changeLang(2)"
              >
                <span>英文</span>
              </el-dropdown-item>
              <el-dropdown-item
                divided
                @click.native="changeLang(3)"
              >
                <span>繁体</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view>
          
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from "vuex";

export default {
  created() {
    // 获取点击的链接
    this.activePath = window.sessionStorage.getItem("activePath");
  },
  data() {
    return {
      isCollapse: false, // 是否折叠
      activePath: "", // 选中菜单
      menuList: [
        {
          id: 1,
          name: this.$t('navBar.user'),
          children: [
            {
              id: 1.1,
              path: "/user",
              name: "用户信息"
            }
          ]
        },
        { id: 3, path: "/about", name: "关于我们" },
        {
          id: 4,
          name: "功能演示",
          children: [
            {
              id: 4.1,
              path: "/iconSelect",
              name: "选择icon"
            },
            {
              id: 4.2,
              path: "/flowChat",
              name: "G6流程图"
            },
            {
              id: 4.3,
              path: "/flowChat1",
              name: "G6流程图1"
            },
            {
              id: 4.4,
              path: "/flowChat2",
              name: "G6流程图2"
            },
            {
              id: 4.5,
              path: "/flowChat3",
              name: "G6流程图3"
            },
            {
              id: 4.6,
              path: "/flowChat4",
              name: "X6流程图1"
            },
            {
              id: 4.7,
              path: "/flowChat5",
              name: "G6自定义树图"
            },
            {
              id: 4.8,
              path: "/flowChat6",
              name: "G6-Dagre图"
            },
            {
              id: 4.9,
              path: "/flowChat7",
              name: "G6-Dagre图1"
            },
            {
              id: 4.11,
              path: "/flowChat8",
              name: "G6-Dagre图2"
            },
            {
              id: 4.22,
              path: "/digui",
              name: "递归组件"
            },
            {
              id: 4.23,
              path: "/fishbone",
              name: "列表拖动"
            },
          ]
        },
        {
          id: 5,
          name: "图表",
          children: [
            {
              id: 5.21,
              path: "/echats1",
              name: "折柱混合图"
            },
            {
              id: 5.2,
              path: "/echats2",
              name: "堆叠图"
            },
            {
              id: 5.3,
              path: "/echats3",
              name: "柱状图"
            },
            {
              id: 5.4,
              path: "/echats4",
              name: "折柱混合图"
            },
            {
              id: 5.5,
              path: "/echats5",
              name: "饼图"
            },
            {
              id: 5.6,
              path: "/echats6",
              name: "饼图"
            },
            {
              id: 5.7,
              path: "/echats7",
              name: "折柱混合图"
            },
            {
              id: 5.8,
              path: "/echats8",
              name: "折柱混合双Y图"
            },
            {
              id: 5.9,
              path: "/echats9",
              name: "堆叠折线图"
            },
            {
              id: 5.13,
              path: "/echats13",
              name: "堆叠图"
            },
            {
              id: 5.1,
              path: "/echats10",
              name: "折柱混合图"
            },
            {
              id: 5.11,
              path: "/echats11",
              name: "折柱混合图"
            },
            {
              id: 5.12,
              path: "/echats12",
              name: "堆叠图"
            }
          ]
        },
        {
          id: 6,
          name: "饿了么",
          children: [
            { id: 6.1, path: "/element1", name: "表格展开" },
            { id: 6.2, path: "/element2", name: "添加列" },
            { id: 6.3, path: "/element3", name: "合并表格" },
            { id: 6.4, path: "/element4", name: "表格跨页多选" },
            { id: 6.5, path: "/element5", name: "添加列" },
            { id: 6.6, path: "/element6", name: "可编辑树形" },
            { id: 6.7, path: "/element7", name: "表格自动滚动" },
            { id: 6.8, path: "/tableCopy", name: "excel复制到表格" },
            { id: 6.9, path: "/tableCopy2", name: "excel复制到表格2" },
            { id: 6.11, path: "/form1", name: "表单组件" },
            { id: 6.12, path: "/tableChangeByBoard", name: "可编辑表格键盘切换" },
          ]
        },
        {
          id: 7,
          name: "签名组件",
          children: [
            { id: 7.1, path: "/qianming", name: "手写签名" },
            { id: 7.2, path: "/cj", name: "抽奖" }
          ]
        },
        {
          id: 8,
          name: "流程图",
          children: [
            { id: 8.1, path: "/process1", name: "流程图1" },
            { id: 8.2, path: "/process2", name: "流程图2" },
            { id: 8.3, path: "/process3", name: "jsmind" },
          ]
        },
        {
          id: 9,
          name: "css样式",
          children: [
            { id: 9.1, path: "/css1", name: "animation动画" },
            { id: 9.2, path: "/wow", name: "wow实现页面滚动动画" },
            { id: 9.3, path: "/scrollx", name: "横向滚动" },
            { id: 9.4, path: "/drag", name: "元素拖拽" },
            { id: 9.5, path: "/scrolly", name: "纵向滚动" },
          ]
        },
        {
          id: 11,
          name: "个性化",
          children: [
            { id: 11.1, path: "/speak", name: "文字播报" },
            { id: 11.2, path: "/socket", name: "webSocket" },
            { id: 11.3, path: "/parallax", name: "parallax" },
            { id: 11.4, path: "/vueTourStep", name: "vueTourStep" }
          ]
        },
        {
          id: 12,
          name: "three.js",
          children: [{ id: 12.1, path: "/three1", name: "学习1" }]
        },
        {
          id: 13,
          name: "大屏可视化",
          children: [
            { id: 13.1, path: "/dv1", name: "案列1" },
            { id: 13.3, path: "/dv2", name: "案列2" },
            { id: 13.2, path: "/dvDemo1", name: "demo1" },
            { id: 13.4, path: "/dv3", name: "案例3" },
            { id: 13.5, path: "/dv4", name: "案例4" },
          ]
        },
        {
          id: 14,
          name: "handsomtable",
          children: [
            { id: 14.1, path: "/handsomtable", name: "表格基础" },
          ]
        },
        {
          id: 15,
          name: "拖拽功能",
          children: [
            { id: 15.1, path: "/draggable", name: "列拖拽" },
            { id: 15.2, path: "/draggable1", name: "分组拖拽" },
            { id: 15.3, path: "/draggable2", name: "克隆拖拽" },
          ]
        },
      ]
    };
  },
  computed: {
    ...mapState(["tabsList"])
  },
  methods: {
    // 折叠显示左侧菜单
    meanCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 菜单点击
    saveNavStatus(item) {
      // 存储到session中
      window.sessionStorage.setItem("activePath", item.path);
      this.activePath = item.path;
      //点击菜单，将菜单信息存储到store中
      this.$store.commit("selectMenu", item);
    },
    // 退出登录
    logout() {
      this.$confirm("确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        this.$cookie.remove("userName");
        this.$router.push({ path: "./login" });
      });
    },
    // 语言包切换
    changeLang(val){
      if(val == "1"){
        this.$i18n.locale = 'zh';
        this.$cookie.set("locale", "zh");
        console.log(this.$t('navBar.user'),"5555")
      }else if(val == "2"){
        this.$i18n.locale = 'en';
        this.$cookie.set("locale", "en");
        console.log(this.$t('navBar.user'),"5555")
      }else{
        this.$i18n.locale = 'trzh';
        this.$cookie.set("locale", "trzh");
        console.log(this.$t('navBar.user'),"5555")
      }
      this.$router.go(0)
    }
  }
};
</script>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  padding: 0 10px;
}
.el-main {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  height: 100%;
}
.el-container {
  height: 98vh;
}
.title {
  text-align: center;
  height: 60px;
  line-height: 60px;
  margin: 0;
  color: rgb(135, 114, 229);
}
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header div {
  cursor: pointer;
}
.userImg {
  width: 32px;
  height: 32px;
}
.user-name:hover {
  color: aqua;
}
.collapse {
  flex: 0.8;
}
.mianbao {
  flex: 20;
}
.userinfo {
  flex: 1.5;
}
/* 滚动条样式开始 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(17, 157, 212), rgb(17, 212, 105));
  border-radius: 5px;
  transition: 1s;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(rgb(17, 212, 105), rgb(17, 157, 212));
}
/* 滚动条样式结束 */
</style>
